
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>用户管理 - 食物食材食品基本信息Web系统</title>
  <link rel="stylesheet" href="css/style.css">
  <script>
    if (!sessionStorage.getItem('isLoggedIn')) {
      window.location.href = 'login.html';
    }
  </script>
</head>
<body>
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <header>
    <h1>食物食材食品基本信息Web系统</h1>
    <nav>
      <div class="user-menu" id="userMenu">
        <img src="img/avatar.png" alt="头像" class="avatar" id="userAvatar">
        <span class="username" id="usernameDisplay">用户</span>
        <span class="dropdown-arrow">&#9662;</span>
        <div class="dropdown-menu" id="dropdownMenu">
          <a href="#" id="profileLink"><span class="menu-icon">&#8962;</span> 个人空间</a>
          <a href="login.html" id="logout"><span class="menu-icon">&#9906;</span> 退出登录</a>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <a href="index.html" class="back-home-btn"><span>返回首页</span></a>
    <section>
      <h2>用户管理</h2>
      <p class="admin-notice">此功能仅限管理员使用</p>
      
      <!-- 新增用户按钮和弹窗 -->
      <div style="margin-bottom: 18px;">
        <button id="addUserBtn" class="btn btn-success">新增用户</button>
      </div>
      <div id="addUserModal" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:9999;align-items:center;justify-content:center;">
        <div style="background:#fff;border-radius:12px;box-shadow:0 4px 24px #0002;padding:32px 36px;min-width:340px;text-align:center;">
          <div style="font-size:20px;font-weight:600;margin-bottom:18px;color:#388e3c;">新增用户</div>
          <form id="addUserForm">
            <div style="margin-bottom:14px;text-align:left;">
              <label>用户名：</label><br>
              <input type="text" id="addUsername" name="username" style="width:90%;padding:8px 10px;font-size:16px;border:1px solid #ccc;border-radius:5px;">
            </div>
            <div style="margin-bottom:14px;text-align:left;">
              <label>邮箱：</label><br>
              <input type="email" id="addEmail" name="email" style="width:90%;padding:8px 10px;font-size:16px;border:1px solid #ccc;border-radius:5px;">
            </div>
            <div style="margin-bottom:18px;text-align:left;">
              <label>密码：</label><br>
              <input type="password" id="addPassword" name="password" style="width:90%;padding:8px 10px;font-size:16px;border:1px solid #ccc;border-radius:5px;">
            </div>
            <div style="margin-top:10px;">
              <button type="submit" class="btn btn-success" style="margin-right:18px;">确定</button>
              <button type="button" id="cancelAddUserBtn" class="btn btn-secondary">取消</button>
            </div>
          </form>
        </div>
      </div>
      
      <!-- 用户列表 -->
      <div class="admin-section">
        <h3>用户列表</h3>
        <div class="table-container">
          <table id="usersTable" class="admin-table">
            <thead>
              <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>当前角色</th>
                <th>注册时间</th>
                <th>最后登录</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="usersTableBody">
              <!-- 用户数据将在这里显示 -->
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 权限管理 -->
      <div class="admin-section">
        <h3>权限管理</h3>
        <form id="permissionForm" class="admin-form">
          <div class="form-row">
            <div class="form-group">
              <label for="selectedUser">选择用户：</label>
              <select id="selectedUser" name="selectedUser" required>
                <option value="">请选择用户</option>
              </select>
            </div>
            <div class="form-group">
              <label for="newRole">新角色：</label>
              <select id="newRole" name="newRole" required>
                <option value="">请选择角色</option>
                <option value="admin">管理员</option>
                <option value="registered">注册用户</option>
              </select>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">更新权限</button>
          </div>
        </form>
      </div>
      
      <!-- 用户统计 -->
      <div class="admin-section">
        <h3>用户统计</h3>
        <div class="stats-grid">
          <div class="stat-card">
            <h4>总用户数</h4>
            <p id="totalUsers">0</p>
          </div>
          <div class="stat-card">
            <h4>管理员</h4>
            <p id="adminCount">0</p>
          </div>
          <div class="stat-card">
            <h4>注册用户</h4>
            <p id="registeredCount">0</p>
          </div>
          <div class="stat-card">
            <h4>普通用户</h4>
            <p id="guestCount">0</p>
          </div>
        </div>
      </div>
      
      <!-- 操作日志 -->
      <div class="admin-section">
        <h3>最近操作</h3>
        <div id="operationLog" class="log-container">
          <!-- 操作日志将在这里显示 -->
        </div>
      </div>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 食物食材食品基本信息Web系统</p>
  </footer>
  <script src="js/auth_manage.js"></script>
  <script src="js/user_menu.js"></script>
  <div id="customTableModal" class="modal" style="display:none;">
    <div class="modal-content" id="customTableModalContent">
      <!-- 弹窗内容由js/table_manage.js动态生成 -->
    </div>
  </div>
  <!-- 用户编辑弹窗 -->
  <div id="editUserModal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width:400px;">
      <h4 style="margin-bottom:12px;">编辑用户</h4>
      <form id="editUserForm">
        <div class="form-group">
          <label for="editUsername">用户名：</label>
          <input type="text" id="editUsername" name="editUsername" readonly>
        </div>
        <div class="form-group">
          <label for="editEmail">邮箱：</label>
          <input type="email" id="editEmail" name="editEmail" required>
        </div>
        <div style="text-align:right;margin-top:16px;">
          <button type="submit" class="btn btn-primary">保存</button>
          <button type="button" class="btn btn-secondary" id="cancelEditUserBtn">取消</button>
        </div>
      </form>
    </div>
  </div>
</body>
</html> 